<template>
  <div style="height: 70px;width: 100%;background: #aeb3c5;text-align: center">
    <span style="color: white;line-height: 70px;font-size: 25px">库存一览</span>
  </div>
  <el-table :data="cutBean.records" style="width: 100%">
    <el-table-column prop="name" label="商品"/>
    <el-table-column prop="type" label="类别"/>
    <el-table-column prop="brand" label="品牌"/>
    <el-table-column prop="num" label="库存数量"/>
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="s">
        <el-button type="danger" @click="dialogShow=true;this.showProduct(s.row)">查看</el-button>
        <el-button type="success" @click="dialogUpdate=true;this.showUpdate(s.row)">修改销售价</el-button>
      </template>
    </el-table-column>
  </el-table>


  <div style="display: flex;justify-content: space-around;margin-top: 30px">
    <div>
      <!--页码-->
      <el-pagination
          v-model:currentPage="cutBean.current"
          v-model:page-size="cutBean.size"
          background
          layout="prev, pager, next, jumper"
          :total="cutBean.total"
          style="margin-top: 30px"
          @current-change="findByItem"
      />
    </div>
    <!--查询商品信息-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>查询商品信息</span>
          <el-button type="primary" @click="this.findByItem(1)">查询</el-button>
        </div>
      </template>
      <div class="text item">
        <div>
          商品：
          <el-input v-model="findObj.name" placeholder="商品名称"/>
        </div>
        <div style="display: flex;justify-content: space-between;margin-top: 30px">
          <div>
            起始数量：
            <el-input v-model="findObj.startNum" placeholder="起始数量"/>
          </div>
          <div>
            结束数量：
            <el-input v-model="findObj.endNum" placeholder="结束数量"/>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;margin-top: 30px">
          <div>
            未定销售价：
            <el-select v-model="findObj.salePrice" placeholder="请选择" size="large">
              <el-option label="未定义销售价" value="未定义销售价"></el-option>
              <el-option label="定义销售价" value="定义销售价"></el-option>
            </el-select>
          </div>
          <div>
            类别：
            <el-select v-model="findObj.type" placeholder="请选择" size="large">
              <el-option label="电脑产品" value="电脑产品"></el-option>
              <el-option label="电脑配件" value="电脑配件"></el-option>
              <el-option label="办公耗材" value="办公耗材"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </el-card>
  </div>


  <!--查看弹出框-->
  <el-dialog
      v-model="dialogShow"
      title="商品详细信息"
      width="45%"
      :before-close="handleClose">
    <div style="display: flex;justify-content: space-around">
      <div>
        <div style="margin-bottom: 30px;">商品编号：
          <span>{{ showObj.id }}</span>
        </div>
        <div style="margin-bottom: 30px;">商品名称：
          <span>{{ showObj.name }}</span>
        </div>
        <div style="margin-bottom: 30px;">品牌：
          <span>{{ showObj.brand }}</span>
        </div>
        <div style="margin-bottom: 30px;">类别：
          <span>{{ showObj.type }}</span>
        </div>
        <div style="margin-bottom: 30px;">最新采购价：
          <span>{{ showObj.buyPrice }}</span>
        </div>
      </div>
      <div>
        <img :src="'/project/inventoryImg/'+showObj.imgPath" style="width: 100px;margin: 20px">
        <div style="margin-bottom: 30px;">库存数量：
          <span>{{ showObj.num }}</span>
        </div>
        <div style="margin-bottom: 30px;">建议销售价：
          <span>{{ showObj.sellPrice }}</span>
        </div>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button type="primary" @click="dialogShow = false">确认</el-button>
  </span>
    </template>
  </el-dialog>

  <!--修改弹出框-->
  <el-dialog
      v-model="dialogUpdate"
      title="修改销售价"
      width="45%"
      :before-close="handleClose">
    <div style="display: flex;justify-content: space-around">
      <div>
        <div style="margin-bottom: 30px;">商品编号：
          <span>{{ updateObj.id }}</span>
        </div>
        <div style="margin-bottom: 30px;">商品名称：
          <span>{{ updateObj.name }}</span>
        </div>
        <div style="margin-bottom: 30px;">品牌：
          <span>{{ updateObj.brand }}</span>
        </div>
        <div style="margin-bottom: 30px;">类别：
          <span>{{ updateObj.type }}</span>
        </div>
        <div style="margin-bottom: 30px;">最新采购价：
          <span>{{ updateObj.buyPrice }}</span>
        </div>
      </div>
      <div>
        <img :src="'/project/inventoryImg/'+updateObj.imgPath" style="width: 100px;margin: 20px">
        <div style="margin-bottom: 30px;">库存数量：
          <span>{{ updateObj.num }}</span>
        </div>
        <div style="margin-bottom: 30px;">
          建议销售价：
          <el-input input-style="width:200px" v-model="updateObj.sellPrice"/>
        </div>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogUpdate = false">取消修改</el-button>
    <el-button type="primary" @click="dialogUpdate = false;this.sureUpdate(this.updateObj)">确认修改</el-button>
  </span>
    </template>
  </el-dialog>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      findObj: {},
      cutBean: {},
      showObj: {},
      updateObj: {},
      dialogShow: false,
      dialogUpdate: false
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/product/findByItem", {
        params: this.findObj
      }).then(resp => {
        this.cutBean = resp.data;
      })
    },
    showProduct(obj) {
      this.showObj = obj;
    },
    showUpdate(obj) {
      this.updateObj = obj;
    },
    sureUpdate(obj) {
      axios.get("/project/product/update",{
        params:{
          id:obj.id,
          buyMoney:obj.sellPrice,
        }
      }).then(resp=>{
        alert(resp.data)
        if (resp.data=="ok"){
          this.updateObj = {};
          this.findByItem(1)
        }
      })
    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>